<html xmlns="http://www.w3.org/TR/REC-html40" lang="zh-TW">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div.words {
      border: 1px outset;
      background-color: #EFEFEF;
      width: 75px;
      display: inline;
    }

    .percents {
      line-height: 22px;
      height: 24px;
    }

    .percent_name {
      display: none;
      visibility: hidden;
      font-size: 12px;
      line-height: 20px;
      text-align: right;
      width: 200px;
      height: 22px;
    }

    .percent_box {
      height: 22px;
      width: 100%;
      padding: 1px;
      border: 1px solid #E5E5E5;
    }

    .percent_current1 {
      color: white;
      background-color: #FF8080;
      height: 20px;
    }

    .percent_current2 {
      color: white;
      background-color: #CACACA;
      height: 20px;
    }

    .percent_current3 {
      color: white;
      background-color: #58A0EC;
      height: 20px;
    }
  </style>
</head>

<body />
<script type="text/javascript">
  function appendElement(tag, html) {
    var createDiv = document.createElement(tag);
    createDiv.innerHTML = html;
    document.body.appendChild(createDiv);
  }

  var pagetitle = "方言音系相似度測試";
  var methods = new Array(
    "方言音系相似度", {{METHODS}}
  );
  var dialects = new Array(
{{DIALECTS}}
  );
  var words = new Array(
    "丙病", "甫浦", "斧虎", "黃王", "同洞", "研年", "良娘", "若落", "角脚", "去口", "環還", "鹹喊", "雞資", "雞低", "九酒", "詳牆", "乞喫", "訓順", "照趙", "早找", "詩師", "純順", "書虛", "扇線", "然言", "文完", "眼安", "我鵝", "容用", "姐子", "井進", "朋盆", "噸燈", "孫森", "困孔", "人然", "令憐", "刪拴", "染軟", "賴懶", "梅棉", "多端", "關光", "關官", "汗換", "奸姜", "奸肩", "戰站", "姐賈", "野以", "社曬", "車哥", "內貝", "最肥", "車費", "飛梯", "瘸茄", "靴耍", "靴雖", "圍圓", "雷驢", "雨五", "書梳", "湖河", "哥鍋", "哥溝", "個夠", "貿墓", "母某", "某媒", "米美", "耳馬", "二奧", "也矮", "甲脚", "八剝", "莫末", "落六", "木麥", "木默", "百北", "粥竹", "竹骨", "縮說", "盒活", "喝黑", "赤色", "則哲", "日熱", "鐵踢", "蟹海", "花話", "販飯", "救舅", "劇據", "瘦肉", "測廁", "式試", "失釋", "濕石"
  );

  var nc = 30, nv = 60, nt = 10;
  var nw = words.length;
  var nd = dialects[0].length;
  var nm = methods.length;
  var i;
  document.title = pagetitle;
  appendElement("h3", pagetitle + " V41." + nd + "{{DATE}}");
  appendElement("p", "<a href=https://github.com/osfans/MCPDict>漢字音典</a> &copy; 2021-2025 <span style='color:lightgray'>江淮漢韻 2011-2020</span>");
  document.write("請用你熟悉的口音讀題作答，也可參考 <input type=\"text\" id=\"searchFilter\" name=\"searchFilter\" placeholder=\"輸入篩選\" size=\"5\" onkeyup=\"filterItems(this);\">");
  var selElement = document.createElement("select");
  selElement.id = "dialects";
  selElement.onchange = preset;
  var optionsCache = [];
  for (i = 0; i < nd; i++) {
    var optionElement = document.createElement("option");
    var item = dialects[0][i];
    optionElement.id = "o" + i;
    optionElement.innerHTML = '[' + i + ']' + item[0] + (item[1] ? ' - ' + item[1] : '');
    selElement.appendChild(optionElement);
    optionsCache.push(optionElement.cloneNode(true));
  }
  document.body.appendChild(selElement);
  document.write("的答案，如不確定可單擊兩次變成<input type='checkbox' name='test' id='test'/>跳過此題。交卷後可查看與各音系或各方言片的相似度，數值僅供參考。<br>");
  appendElement("hr", "");
  document.getElementById("test").indeterminate = true;

  function filterItems(el) {
    var value = el.value.toLowerCase();
    var opt, sel = document.getElementById('dialects');
    sel.options.length = 0;
    for (var i=0, iLen=optionsCache.length; i<iLen; i++) {
      opt = optionsCache[i];
      if (value == '' || opt.text.toLowerCase().indexOf(value) != -1) {
        sel.appendChild(opt.cloneNode(true));
      }
    }
    preset();
  }

  function onupdate() {
    var id = this.id.substring(1);
    var cb = document.getElementById('c' + id);
    var div = document.getElementById('d' + id);
    if (div.style.backgroundColor == "rgb(239, 239, 239)") {
      cb.checked = true;
      cb.indeterminate = false;
      div.style.backgroundColor = "#8AD0FB";
    } else if (div.style.backgroundColor == "rgb(138, 208, 251)") {
      cb.checked = false;
      cb.indeterminate = true;
      div.style.backgroundColor = "#CACACA";
    } else {//if (div.style.backgroundColor == "#CACACA") {
      cb.checked = false;
      cb.indeterminate = false;
      div.style.backgroundColor = "#EFEFEF";
    }
  }
  for (i = 0; i < nw; i++) {
    if (i == 0) appendElement("h4", "甲、請勾選出聲母相同的字對(" + Math.round(nc * 100 / nw) + "%)");
    else if (i == nc) appendElement("h4", "乙、請勾選出韻母相同的字對(" + Math.round(nv * 100 / nw) + "%)");
    else if (i == nc + nv) appendElement("h4", "丙、請勾選出聲調相同的字對(" + Math.round(nt * 100 / nw) + "%)");
    var createDiv = document.createElement('div');
    createDiv.id = "d" + i;
    createDiv.className = "words";
    createDiv.onclick = onupdate;
    createDiv.style.backgroundColor = "#EFEFEF";
    createDiv.innerHTML = '<input type="checkbox" name="checkbox" onclick="onupdate(this)" id=c' + i + '>' + words[i] + '&nbsp;&nbsp;</input>';
    document.body.appendChild(createDiv);
    document.write((i + 1) % 5 == 0 ? '<br>' : '');
  }
  document.write('<br>測試項目：');
  var selElement = document.createElement("select");
  selElement.id = "methods";
  selElement.onchange = getResult;
  for (i = 0; i < nm; i++) {
    var optionElement = document.createElement("option");
    if (i == 0) optionElement.selected = true;
    selElement.appendChild(optionElement);
    optionElement.innerHTML = methods[i];
  }
  document.body.appendChild(selElement);
  document.write('<br><form method="POST"><input type="text" name="textresult" value="" style="display:none"><p><input type="button" value="交卷" onclick="getResult();">&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="重做" onclick="clearStatus();"></p><p></p></form>');
  document.write('<span id=msgfield style="color:blue"></span>');
  function cmp(a, b) {
    return b - a;
  }

  function getOneResult(selectedIndex, itemCount) {
    var num = dialects[selectedIndex].length;
    var retn = new Array(num);
    var ee = document.getElementsByName("checkbox");
    var choices = "";
    var i, j;
    for (i = 0; i < nw; i++) {
      if (ee[i].indeterminate) {
        choices += "-";
      } else {
        choices += ee[i].checked ? "1" : "0";
      }
    }
    document.getElementsByName("textresult")[0].value = choices;
    var start = selectedIndex == 0 ? 2 : 0;
    for (j = start; j < num; j++) {
      var tmp = 0;
      var valid = nw;
      for (i = 0; i < nw; i++) {
        var a = choices.charAt(i);
        var b = dialects[selectedIndex][j][2].charAt(i);
        if (a == "-" || b == "-") {
          valid--;
          continue;
        }
        if (a == b) tmp++;
      }
      tmp = Math.floor(tmp * nw / valid);
      retn[j] = (tmp << 12) + j;
    }
    retn.sort(cmp);

    var msg = '<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>';
    if (selectedIndex == 0) {
      msg += "<p style=\"word-break: break-all;\">你的答案是“" + choices + "”。</p>"; msg += "<p>你的方言最接近“<b>" + dialects[selectedIndex][retn[0] & 4095][0] + "</b>”，";
    } else if (selectedIndex == 5) {
      msg += "可能是<b>" + dialects[selectedIndex][retn[0] & 4095][0] + '</b>人，';
    } else {
      msg += "可能屬“<b>" + dialects[selectedIndex][retn[0] & 4095][0] + '</b>”，';
    }
    if (itemCount > 1) {
      if (selectedIndex == 0) {
        msg += "與各音系的相似度依次爲：</p>";
      } else if (selectedIndex == 5) {
        msg += "來自各市的可能性依次爲：</p>";
      } else {
        msg += "屬各片的可能性依次爲：</p>";
      }
      var mnd = Math.min(num, itemCount);
      for (i = 0; i < mnd; i++) {
        j = retn[i] & 4095;
        var percent = Math.round((retn[i] >> 12) * 1000 / nw) / 10;
        if (percent < 60 && i >= 20) break;
        msg += '<div class="percents"><div class="percent_name">' + dialects[selectedIndex][j][0] + percent + '%</div><div class="percent_box"><div class="percent_current' + (percent < 60 ? '1' : (percent < 75 ? '2' : '3')) + '" style="width:' + percent + '%;">' + percent + '% ' + dialects[selectedIndex][j][0] + '</div>' + '</div></div>';
      }
    }
    return msg;
  }

  function getResult() {
    var i = document.getElementById("methods").selectedIndex;
    var msg = getOneResult(0, i > 0 ? 1 : 50);
    if (i > 0) {
      msg += getOneResult(i, 20);
    }
    document.getElementById("msgfield").innerHTML = msg;
  }

  function preset() {
    document.getElementById("test").indeterminate = true;
    var i = document.getElementById("dialects").selectedIndex;
    var n = document.getElementById("dialects").options[i].id.substring(1);
    var ee = document.getElementsByName("checkbox");
    var dd = document.getElementsByTagName("div");
    for (var i = 0; i < ee.length; i++) {
      var tmp = Boolean(dialects[0][n][2].charAt(i) == "1");
      var indeterminate = Boolean(dialects[0][n][2].charAt(i) == "-");
      if (indeterminate) {
        dd[i].style.backgroundColor = "#CACACA";
        ee[i].indeterminate = true;
        ee[i].checked = false;
      } else {
        ee[i].indeterminate = false;
        ee[i].checked = tmp;
        dd[i].style.backgroundColor = tmp ? "#8AD0FB" : "#EFEFEF";
      }
    }
  }
  function clearStatus() {
    var filter = document.getElementById("searchFilter");
    filter.value = "";
    filterItems(filter);
    document.getElementById("msgfield").innerHTML = "";
    document.getElementById("dialects").options[0].selected = "selected";
    preset();
  }
</script>

</html>